<div class="page-content">
	<div class="row">
		<div class="col-xs-12"> 
			<form name="userForm" id="userForm" novalidate="" action="{:U('Station/save_nav')}" method="post"> 
				<div class="form-horizontal">
					<input type="hidden" id="id" name="id" value="{$nav_info['id']}"/>
					<input type="hidden" id="nav_id" name="nav_id" value="{$nav_info['nav_id']}"/>
					<input type="hidden" id="type" name="type" value="{$nav_info['type']}"/>
					<div class="form-group">
						<label class="col-sm-2 control-label no-padding-right margintop5" for="form-field-1"> 
							导航名称： 
						</label>
						<div class="col-sm-4">
							<div class="input-group col-xs-12 col-sm-12 ">
								<input type="text" class="form-control" id="nav_name" name="nav_name" value="{$nav_info['nav_name']}"/>
							</div>
							
						</div>
						<div class="help-block col-sm-4" >
							<span id="nav_nameTip"></span>
						</div>
					</div>
					<if condition="$nav_info['type'] eq 0 ">
					<div class="form-group">
						<label class="col-sm-2 control-label no-padding-right margintop5" for="form-field-1"> 
							导航链接： 
						</label>
						<div class="col-sm-4">
							<div class="input-group col-xs-12 col-sm-12 ">
								<input type="text" id="nav_href" class="form-control" name="nav_href" value="{$nav_info['nav_href']}"/>
							</div>
						</div>
						<div class="help-block col-sm-6" >
							<span id="nav_hrefTip"></span>
						</div>
					</div>
					<else/>
					<input type="hidden" id="nav_href" name="nav_href" value="{$nav_info['nav_href']}"/>
					</if>
					<div class="form-group">
						<label class="col-xs-12 col-sm-2 control-label no-padding-right margintop5" for="form-field-5"> 
							排序：
						</label>
						<div class="col-sm-2">
							<div class="input-group col-xs-12 col-sm-12">
								<input type="number" id="sort" class="form-control" name="sort" value="{$nav_info['sort']}"/>
							</div>
						</div>
						<div class="help-block col-sm-8" >
							<span id="sortTip"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-12 col-sm-2 control-label no-padding-right margintop5" for="form-field-5"> 
							图标：
						</label>
						<div class="col-sm-9">
							<input type="hidden" id="nav_image" name="nav_image" value="{$nav_info['nav_image']}" />
							<div class="icon_box">
								<a class="grey" id="icon-info" href="javascript:void(0);" >
									<i class="icon-info bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-list-alt" href="javascript:void(0);" >
									<i class="icon-list-alt bigger-230"></i>
								</a>
							</div>

							<div class="icon_box">
								<a class="grey" id="icon-qq" href="javascript:void(0);" >
									<i class="icon-qq bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-weibo" href="javascript:void(0);">
									<i class="icon-weibo bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-weixin" href="javascript:void(0);" >
									<i class="icon-weixin bigger-230"></i>
								</a>
							</div>
					
							<div class="icon_box">
								<a class="grey" id="icon-beer" href="javascript:void(0);" >
									<i class="icon-beer bigger-230"></i>
								</a>
							</div>
							
							<div class="icon_box">
								<a class="grey" id="icon-bell" href="javascript:void(0);" >
									<i class="icon-bell bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-book" href="javascript:void(0);" >
									<i class="icon-book bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-bullhorn" href="javascript:void(0);" >
									<i class="icon-bullhorn bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-calendar" href="javascript:void(0);" >
									<i class="icon-calendar bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-camera" href="javascript:void(0);" >
									<i class="icon-camera bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-cloud" href="javascript:void(0);" >
									<i class="icon-cloud bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-coffee" href="javascript:void(0);" >
									<i class="icon-coffee bigger-230"></i>
								</a>
							</div>
							
							<div class="icon_box">
								<a class="grey" id="icon-credit-card" href="javascript:void(0);" >
									<i class="icon-credit-card bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-desktop" href="javascript:void(0);" >
									<i class="icon-desktop bigger-230"></i>
								</a>
							</div>
							
							<div class="icon_box">
								<a class="grey" id="icon-female" href="javascript:void(0);" >
									<i class="icon-female bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-fighter-jet" href="javascript:void(0);" >
									<i class="icon-fighter-jet bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-film" href="javascript:void(0);" >
									<i class="icon-film bigger-230"></i>
								</a>
							</div>
							
							<div class="icon_box">
								<a class="grey" id="icon-gamepad" href="javascript:void(0);" >
									<i class="icon-gamepad bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-gift" href="javascript:void(0);" >
									<i class="icon-gift bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-group" href="javascript:void(0);" >
									<i class="icon-group bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-heart" href="javascript:void(0);" >
									<i class="icon-heart bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-home" href="javascript:void(0);" >
									<i class="icon-home bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-key" href="javascript:void(0);" >
									<i class="icon-key bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-legal" href="javascript:void(0);" >
									<i class="icon-legal bigger-230"></i>
								</a>
							</div>
							
							<div class="icon_box">
								<a class="grey" id="icon-location-arrow" href="javascript:void(0);" >
									<i class="icon-location-arrow bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-lock" href="javascript:void(0);" >
									<i class="icon-lock bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-male" href="javascript:void(0);" >
									<i class="icon-male bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-map-marker" href="javascript:void(0);" >
									<i class="icon-map-marker bigger-230"></i>
								</a>
							</div>
							
							<div class="icon_box">
								<a class="grey" id="icon-mobile-phone" href="javascript:void(0);" >
									<i class="icon-mobile-phone bigger-230"></i>
								</a>
							</div>
							
							<div class="icon_box">
								<a class="grey" id="icon-music" href="javascript:void(0);" >
									<i class="icon-music bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-phone" href="javascript:void(0);" >
									<i class="icon-phone bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-user" href="javascript:void(0);" >
									<i class="icon-user bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-truck" href="javascript:void(0);" >
									<i class="icon-truck bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-trophy" href="javascript:void(0);" >
									<i class="icon-trophy bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-tag" href="javascript:void(0);" >
									<i class="icon-tag bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-shopping-cart" href="javascript:void(0);" >
									<i class="icon-shopping-cart bigger-230"></i>
								</a>
							</div>
							<div class="icon_box">
								<a class="grey" id="icon-sitemap" href="javascript:void(0);" >
									<i class="icon-sitemap bigger-230"></i>
								</a>
							</div>
						</div>
					</div>
					<div class="form-group" >
						<label class="col-sm-2 control-label no-padding-right margintop5">状态：</label>
						<div class="col-sm-9">
							<input type="checkbox" id="status" name="status" <if condition="$nav_info['status'] eq 1 "> checked </if>/>
						</div>
						
					</div>
					
					
					
				
					<div id="alert_box"></div>
					<div class="clearfix form-actions">
						<div class="col-md-offset-2 col-md-9 col-sm-9">
							<button id="save" class="col-sm-2 btn btn-success" type="submit" >
								<i class="icon-save bigger-110"></i>
							 	<span id="submitbutton">保存</span>
							</button>
							<button class="col-sm-2 btn btn-default left10" type="button" id="cancle">
								<i class="icon-reply bigger-110"></i>
							 	<span id="submitbutton">取消</span>
							</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
      	var status = "{$nav_info['status']}";
      	if (status == ''){
      		status = 1;
      		$('#status').attr('checked', true);
      	}
      	var nav_image = "{$nav_info['nav_image']}";
		$('#status').bootstrapSwitch({'onText':'启用', 'offText':'禁用', 'state': status==0 ? false : true, 'onSwitchChange':function(e, data){
		    $('#status').attr('checked', data);
		}});
		if (nav_image != ''){
			$('#'+nav_image).parent().addClass('icon_box_backgroud');
		}
		$('.icon_box').click(function(){
			$('.icon_box').each(function(){
				$(this).removeClass('icon_box_backgroud');
			});
			$(this).addClass('icon_box_backgroud');
			$('#nav_image').val($(this).find('a').attr('id'));
		});

		//status
		$('#cancle').click(function(){
			window.location.href = "{:U('Station/nav')}";
		});
		$.formValidator.initConfig({
			formid:"userForm",
			onerror:function(msg){
			},
			onsuccess:function(){
				if ($('#nav_image').val() == ''){
					$("#alert_box").jk_alert({msg: "请选择一个图标", type: 'danger', show_time: 8000});
                	return false;
				}
			}
		}); 
		$("#nav_name").formValidator({empty:false, onshow:"请输入导航名称", onfocus:"范围为[2-12]", oncorrect:" "})
		.functionValidator({fun:function(val,elem){
			if (val.length >= 2 && val.length <= 12){
				return true;
			}else{
				return 	'输入错误';
			}
		}});

		$("#nav_href").formValidator({onshow:"请输入地址" ,onfocus:"如：www.test.com",oncorrect:" "})
		.functionValidator({fun:function(val,elem){
				if ($('#id').val() != '' || $('#nav_id').val() != ''){
					return true;
				}
				if(!val.match(regexEnum.http)){
					return "域名格式不正确";
				}else{
					return true;	
				}
			}
		});
		$("#sort").formValidator({empty:true, onshow:"请输入序号，越小越靠前", onfocus:"范围为[1-100]，默认为：1", oncorrect:" ", onempty:' '})
		.functionValidator({fun:function(val,elem){
			if (val.length >= 1 && val.length <= 100){
				return true;
			}else{
				return 	'输入错误';
			}
		}});

	})
</script>				                
